{extend name="public/base"/}
{block name="style"}
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/libs/bootstrap-editable.css">
{/block}
{block name="body"}
<div class="main-box clearfix">
	<header class="main-box-header clearfix">
		<div class="pull-right">
			<button type="button" class="btn btn-primary" id="createUrl">
				<i class="fa fa-plus"></i> 添加分类 <span class="caret"></span>
			</button>
			<button class="btn btn-danger ajax-post confirm" url="{:url('del')}" target-form="ids">删 除</button>
        </div>
		<div class="row">
			<form method="get">
				<div class="col-sm-12 col-md-4 col-lg-3">
					<input type="text" class="form-control" name="keyword" value="{$keyword|default=''}" placeholder="">
				</div>
				<div class="col-sm-12 col-md-4">
					<button class="btn btn-primary" type="submit">搜索</button>
				</div>
				
			</form>
		</div>
	</header>
	<div class="main-box-body clearfix">
		<div class="table-responsive clearfix">
			<div class="table-responsive clearfix">
				<table class="table table-striped table-bordered table-hover responsive">
					<thead>
						<tr>
							<th width="30"><input class="checkbox check-all" type="checkbox"></th>
							<th>ID </th>
							<th>频道</th>
                            <th>分类名称</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
                        {empty name="list"}
						<tr><td colspan="5" align="center">暂无数据！</td></tr>
						{/empty}
						{volist name="list" id="item"}
                        <tr>
							<td><input class="ids row-selected" type="checkbox" name="id[]" value="{$item['id']}"></td>
							<td>{$item.id}</td>
                            <td>{$item.name}</td>
                            <td>{$item.title}</td>
                            <td><a href="JavaScript:;" onclick="editreferral(this)" data-json='{:json_encode($item)}'><i class="fa fa-edit"></i> 修改</a></td>
                        </tr>
                        {/volist}
					</tbody>
				</table>
				{$page}
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="create-referral-link-modal">
	<div class="modal-dialog" role="document">
	   <div class="modal-content">
		   <div class="modal-header">
			   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
			   <span style="font-size: 20px;"><span id="referralname">增加</span></span>
		   </div>
		   <div class="modal-body">
			   <div data-bind="visible: loading" class="loading-panel" style="display: none;">
				   <i class="fa fa-spin fa-spinner"></i>
			   </div>
			   <form class="form-horizontal modelform">
				   <input type="hidden" name="id" id="createspreadid">
				 
				   <div class="form-group">
						<label class="control-label col-sm-3"><span class="required">*</span> 分类名称</label>
						<div class="col-sm-7">
							<input type="text" class="form-control" maxlength="100" name="title" id="title" placeholder="" >
						</div>
					</div>
					
					<div class="form-group">
                        <label class="control-label col-sm-3"><span class="required">*</span> 频道</label>
                        <div class="col-sm-7">
							<label class="radio-inline">
                                <input type="radio" name="name" value="全部"/>
                                <span>全部</span>
                            </label>

                            <label class="radio-inline">
                                <input type="radio" checked="true" name="name" id="name"  value="男频"/>
                                <span>男频</span>
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="name" value="女频"/>
                                <span>女频</span>
                            </label>
                            
                        </div>
                    </div>
					<input type="hidden" name="id" id="createspreadid">
					<div class="form-group">
						<label class="control-label col-sm-3"><span class="required">*</span> 显示地方</label>
						<div class="col-sm-9">
							{volist name="types" id="vo"}
							<label class="radio-inline">
								<input type="checkbox" name="types" value="{$vo.id}" />
								<span>{$vo.name}</span>
							</label>
							{/volist}
						</div>
					</div>
			   </form>
		   </div>
		   <div class="modal-footer">
			   <button type="button" id="createreferral" class="btn btn-primary ">提交</button>
		   </div>
	   </div>
   </div>
</div>

 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

{/block}
{block name="script"}
<script type="text/javascript" src="__PUBLIC__/js/bootstrap-editable.min.js"></script>
<script src="__PUBLIC__/plugs/moment/moment.min.js"></script>
<script src="__PUBLIC__/plugs/moment/zh-cn.js"></script>
<script type="text/javascript" src="__PUBLIC__/plugs/layer/layer.js"></script>
<script type="text/javascript">

$(function() {
	$('.openDilog').click(function(){
		var ee = this;
		layer.open({
			type: 2,
			title: false,
			area: ['70%', '60%'],
			content: $(this).attr('url')+"&_menu=hide&page=1",
			cancel: function(){
			}
		});
	});
	$('#createUrl').on('click',function(){
		var $modal = $('#create-referral-link-modal');
		$modal.on('shown.bs.modal', function () {
		});	
		$modal.modal({backdrop: 'static', keyboard: false})
	});
	$("#createreferral").on('click',function(){
		var data = $('.modelform').serializeJson();
		if (data['name'].length==0) {
			updateAlert("不能为空", 'danger');
			return false;
		}
		if (data['title'].length==0) {
			updateAlert("不能为空", 'danger');
			return false;
		}
		var url = "{:url('add')}";
		$.ajax({
			type: "POST",
			url: url,
			data:data,
			dataType: "json",
			success: function(data){
				if(data.code==1){
					updateAlert(data.msg, 'success');
					setTimeout(function() {	
						window.location.reload();
					}, 1500);
				}else{
					updateAlert("添加，"+data.msg, 'danger');
				}
			},
			error : function(e){
				console.log(e.status);
				console.log(e.responseText);
			}
		})
	});
});
function editreferral(ee){
	var jsonStr = $(ee).attr('data-json');
	var $modal = $('#create-referral-link-modal');
	$modal.on('shown.bs.modal', function () {
		$("#referralname").html("修改");
		$("#createreferral").html("修改");
		var json =  eval("(" + jsonStr + ")");
		$('#createspreadid').val(json.id);
		$('#title').val(json.title);
		$("input:radio[name=name][value="+json.name+"]").attr("checked",true);
		multipleInput(json.types.split(','),$("input:checkbox[name=types]"))
	});
	$modal.on('hide.bs.modal', function () {
		window.location.reload();
	})
	$modal.modal({backdrop: 'static', keyboard: false})
}

function multipleInput(arr,e){
    if(arr.length!==0){
        arr.forEach((v,index)=>{
            $(e).each((item,elem)=>{
                if(v === $(elem).val()){
                    $(elem).attr("checked",true);
                }
            })
        })
    }
}
</script>
{/block}